<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评论测试</title>
    <link th:replace="clip/style::semantic">

</head>
<body>
<div id="app"  style="position:absolute;z-index:999;" >
    <div class="ui container">
        <div th:replace="clip/module::comment-area(6,'update_comments')"></div>
    </div>
</div>
<template th:replace="clip/module::comment"></template>
<script th:replace="clip/script::common"></script>
<script th:replace="clip/script::layer"></script>
<script th:replace="clip/script::semantic"></script>
<script>
    var ajax = {
        data() {
            return {
                comments: [],
                replayId: null,
                replayName: null
            }
        },
        methods: {
            update() {
                json_api("[[@{|${API_PATH}/comments/6|}]]", d => {
                    if (d.code == 200)
                        this.comments = d.result
                    else
                        console.log(d);
                });
            },
            reply(ele) {

                this.replayId = ele.getAttribute('rid');
                this.replayName = ele.getAttribute('rn');
            },
            un_reply(){
                this.replayId = this.replayName = null;
            }
        },
        mounted() {
            this.update();
            // 挂载在外部
            window['update_comments'] = () => {
                this.update();
            }
            window['reply'] = (a) => {
                this.reply(a);
            }
        }
    };
    app = Vue.createApp(ajax);
    app.component('comment-info', {
        props: ['c', 'anchor'],
        template: '#comment-template'
    });
    app.mount('#app');
</script>
</body>
</html>